import React from 'react';
import {Form, Input, Button, Alert, Row, Col} from 'antd';
import { hashHistory } from 'react-router';
import util from 'util';
import $ from 'jquery';

const FormItem = Form.Item;
@Form.create() class Login extends React.Component {

    constructor(props, context) {
        super(props, context);
        this.state = {
            bloading: false,
            alert: null,
            userIcon: <img src="image/icon_user.png"/>,
            visible1:true,
            visible2:true,
        };
        this.willUnmount = true;
    }


    myBrowser(){
        var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
        var isOpera = userAgent.indexOf("Opera") > -1;
        if (isOpera) {
            return "Opera"
        }; //判断是否Opera浏览器
        if (userAgent.indexOf("Firefox") > -1) {
            return "FF";
        } //判断是否Firefox浏览器
        if (userAgent.indexOf("Chrome") > -1){
            return "Chrome";
        }
        if (userAgent.indexOf("Safari") > -1) {
            return "Safari";
        } //判断是否Safari浏览器
        return false;
    }
    // 渲染成功后2342
    componentDidMount() {

        if(!this.myBrowser()){
            console.log("not supported explorer");
            hashHistory.push("notSupported");
        }

        $("#login").bind("keydown", function (e) {
            // 兼容FF和IE和Opera
            var theEvent = e || window.event;
            var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
            if (code == 13) {
                //回车执行查询
                $("#loginButton").click();
            }
        });

        $("#bt-wrapper").bind("mouseover", function(e){
            e.stopPropagation();
            //$(e.currentTarget).find("img").removeClass("hide");
            $(e.currentTarget).find("img").removeClass("arrows_hide");
            $(e.currentTarget).find("img").addClass("arrows_show");
            $(e.currentTarget).find("span").addClass("l-30");
        }).bind("mouseout", function(e){
            e.stopPropagation();
            $(e.currentTarget).find("img").removeClass("arrows_show");
            $(e.currentTarget).find("img").addClass("arrows_hide");
            $(e.currentTarget).find("span").removeClass("l-30");
        })


        this.setState({visible:false},function(){
                this.props.form.resetFields();
            }

        );
    }

    // 结束渲染
    componentWillUnmount() {
        this.willUnmount = false;
        console.log("----------end---------");
    }

    /*checkUserName() {
     //@TODO 用户名验证规则
     }*/

    checkPasswd(rule, value, callback) {
        //@TODO 密码验证规则
        const reg = /(?=.*?[a-zA-Z])(?=.*?[0-9])[a-zA-Z0-9]{6,18}$/;
        if (value && !reg.test(value)) {
            callback([new Error('请输入6-18位数字加字母组合密码')]);
        } else {
            callback();
        }
    }
    // 发送登录请求
    handleSubmit(e) {

        e.preventDefault();
        this.props.form.validateFields((errors, values) => {
            if (!!errors) {
                return;
            }
            //@TODO 登录操作t
            this.setState({
                bloading: true
            });
            console.log("开始请求");
            util.httpRequest({
                type: "POST", url: 'platform010001.json', params: values || {}, success: function (result) {

                    if (result.ret_code === "0000") {
                        //@TODO 登录成功操作1
                        if(result.head_jessionid){
							let userInfo={};
							//userInfo.ent_id=result.ent_id;
							//userInfo.user_name=result.user_name;
							//userInfo.ent_name=result.ent_name;
							//userInfo.user_id=result.user_id;
							userInfo.head_jessionid=result.head_jessionid;
							//userInfo.email=result.email;
							util.setLocalObj("userInfo", userInfo);
							util.setLocalObj("roleids",['system']);
                            console.log("login success");
                        }

                        // 更新数据字典的数据
                        util.httpRequest({
                            type: "POST", url: 'dict050001.json', params: {"dict": ""}, success: function (result) {
                                if (result.rows) {
                                    localStorage.setItem("sys_dic", JSON.stringify(result.rows));
                                }
                            }.bind(this)
                        });
						console.log("get dict success");
                        hashHistory.push("main/a101");
                    } else {

                    }
                }.bind(this), complete: function () {
                    if (this.willUnmount) {
                        this.setState({
                            bloading: false
                        });
                    }
                }.bind(this)
            });
        });
    }

    //
    onFocus(type, e) {
        //if(type=="password"){
        //    if(!this.state.visible2)this.setState({visible2:true})
        //}else{
        //    if(!this.state.visible1)this.setState({visible1:true})
        //}
        $(e.target).parents(".ant-input-wrapper").addClass("input-focus");
        if (type == "user") {
            $("#user_icon").attr("src", "image/icon_user_activate.png");
        } else if (type == "password") {
            $("#password_icon").attr("src", "image/icon_password_activate.png");
        }
    }

    onBlur(type, e) {
        if(type=="password"){
            if(!this.state.visible2)this.setState({visible2:true})
        }else{
            if(!this.state.visible1)this.setState({visible1:true})
        }

        $(e.target).parents(".ant-input-wrapper").removeClass("input-focus");
        if (type == "user") {
            $("#user_icon").attr("src", "image/icon_user.png");
        } else if (type == "password") {
            $("#password_icon").attr("src", "image/icon_password.png")
        }
    }
    // 渲染 qwqw1
    render() {
        const { getFieldError, getFieldProps, isFieldValidating } = this.props.form;
        const formItemLayout = {
            labelCol: {span: 7},
            wrapperCol: {span: 12}
        };
        const userNameProps = getFieldProps("loginname", {
            rules: [
                {
                    required: this.state.visible1,
                    message: '请输入用户名'
                }
            ]
        });
        const passwdProps = getFieldProps("password", {
            rules: [
                {
                    required: this.state.visible2,
                    message: '请输入密码'
                },
                {validator: this.checkPasswd}
            ]
        });
        //123456----------
        return (

            <div className="login" id="login">

                <div className="login_wrap">
                    <div className="logo">
                        <img src="image/login_logonew.png"/>
                        <span className="bolder" >汉银乐行业务管理台</span>
                    </div>
                    <div className="login-panel">
                        <Form horizontal >
                            <FormItem
                                {...formItemLayout}
                                hasFeedback={this.state.visible1}
                                >
                                <Input ref="userInput" addonBefore={<img id="user_icon" src="image/icon_user.png"/>}
                                       onFocus={this.onFocus.bind(this, "user")}
                                       onBlur={this.onBlur.bind(this, "user")}  {...userNameProps}
                                       img=""/>
                            </FormItem>
                            <FormItem
                                {...formItemLayout}
                                hasFeedback={this.state.visible2}
                                >
                                <Input ref="passwordInput"
                                       onBlur={this.onBlur.bind(this, "password")}
                                       onFocus={this.onFocus.bind(this, "password")}
                                       addonBefore={<img id="password_icon" src="image/icon_password.png"></img>} {...passwdProps}
                                       type="password" autoComplete="off" />
                            </FormItem>
                            <Button className="login-bt" id="loginButton" onClick={this.handleSubmit.bind(this)}>
                                <div className="bt-wrapper" id="bt-wrapper">
                                    <img className="content-center" src="image/login_bt_arrows.png"/>
                                    <span className="content-center">登录</span>
                                </div>
                            </Button>
                        </Form>
                    </div>

                </div>
            </div>
        );
    }
}
export default Login;